<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-1.12.4.min.js"></script>
</head>
<body>
    <form method="get" action="login.html">
        <p>
            用户名:<input id="imn" name="name" type="text" onblur="adds()"/>
        </p>
        <p id="nameDiv"></p>
    </form>
</body>
<script type="text/javascript">
    function adds(){
        // 1.创建 XMLHttpRequest 对象
        if(window.XMLHttpRequest) {  // 返回值为true 时说明是新版本 IE 或其他浏览器
            xmlHttpRequest = new XMLHttpRequest();
        } else {   // 返回值为false 时说明是老版本 IE浏览器（IE 5  或  IE 6）
            xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
        }
        // 2.设置回调函数
        xmlHttpRequest.onreadystatechange = callBack;
        // 3.初始化XMLHttpRequest 组件
        var url = "userServlet?name="+$("#imn").val();    // 服务器端URL地址，name 为用户名文本框获取的值
        xmlHttpRequest.open("GET",url,true);   // 创建一个新的Http请求 请求方法get，请求的地址，请求为异步方法
        // 4.发送请求
        xmlHttpRequest.send(null);    // get 为null  post（这里设参数）
        // 回调函数callBack() 中处理服务器响应的关键代码
        function callBack() {
            if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200) { //请求的当前状态为4（读取响应结果）并且 正确返回
                var data = xmlHttpRequest.responseText;  // 以文本的形式获取响应值
                if(data == "true") {
                    $("#nameDiv").html("用户名已被使用！");   // nameDiv为显示消息的div 的id
                } else {
                    $("#nameDiv").html("用户名可以使用！")
                }

            }
        }
    }

</script>
</html>